<template>
    <div id="product">
        <el-row style="padding-bottom:30px">
            <dv-decoration-11 style="width:200px;height:60px;color: whitesmoke;">生产报表</dv-decoration-11>
        </el-row>
        <el-row :gutter="10" style="padding-bottom:30px">
            <el-col :span="12">
                <dv-border-box-10 style="width:100%;height:690px;padding-top:20px">
                    <div class="block">
                        <el-carousel height="300px">
                          <el-carousel-item v-for="item in imgs" :key="item.id">
                            <img :src="item.url" style="height:100%;width:100%" alt="">
                          </el-carousel-item>
                        </el-carousel>
                    </div>
                </dv-border-box-10>
                <!-- <div ref="chart_five" id="chart_five" style="width:100%;height:500px;"></div> -->
            </el-col>
            <el-col :span="6">
                
                <el-row>
                    <el-col>
                        <div ref="chart_three" id="chartthree" style="width:100%;height:350px;"></div>
                    </el-col>
                    <el-col>
                        <div ref="chart_four" id="chartfour" style="width:100%;height:350px"></div>
                    </el-col>
                </el-row>
                
            </el-col>
            <el-col :span="6">
                <dv-border-box-10 style="width:100%;height:450px" class="box_10">
                    <dv-scroll-ranking-board :config="config2" style="width:100%;height:450px" />
                </dv-border-box-10>
                <el-card style="width:100%;height:230px" class="smallcard">
                    <dv-scroll-board :config="config" style="width:100%;height:140px" />
                </el-card>
                <!-- <div style="width:100%;height:350px"></div> -->
            </el-col>
        </el-row>
        <el-row style="padding-bottom:30px">
            <el-col :span="15">
                <dv-border-box-12 style="width:100%;height:100%" class="box12">
                    <div ref="chart_one" id="chartone" style="width:100%;height:450px;"></div>
                </dv-border-box-12>
            </el-col>
            <el-col :span="9">
                <div ref="chart_two" id="charttwo" style="width:100%;height:450px;"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import echarts from 'echarts'
export default {
    name: 'productanaly',
    data() {
        return {
            imgs: [
                {
                    url: 'http://www.ospardubice.wz.cz/vitezove_zavodu/vild_73.JPG',
                    id: 1
                },
                {
                    id: 2,
                    url: 'http://www.mendonomasightings.com/wp-content/uploads/2020/02/Gulls-were-interested-in-the-fish-head-by-Eric-Zetterholm-1536x1152.jpg'
                },
                {
                    id: 3,
                    url: 'https://www.michellepizer.com.au/wp-content/uploads/2018/10/Do-You-Want-to-Know-Whos-Who-1.jpg'
                },
                {
                    id: 4,
                    url: 'https://www.zhifure.com/upload/images/2017/7/1312101825.jpg'
                }
            ],
            ori1: '',
            ori2: '',
            ori3: '',
            ori4: '',
            config: {
                header: ['基地名', '仓号', '光蛋数量'],
                waitTime: 1000,
                headerHeight: 25,
                data: [
                  ['养殖基地1', '6号', '5个'],
                  ['羊岭村', '2号', '1个'],
                  ['养殖基地3', '19号', '2个'],
                  ['碧园村', '1号', '6个'],
                  ['养殖基地6', '9号', '1个'],
                  ['鸡公桥村', '5号', '2个'],
                  ['养殖基地', '7号', '3个'],
                ],
                index:true,
                rowNum: 3,
                columnWidth: [20,90,50,80],
                align: ['center','center','center','center'],
                headerBGC: 'rgba(0, 0, 0, 0)',
                oddRowBGC: 'rgba(0, 0, 0, 0)',
                evenRowBGC: 'rgba(0, 0, 0, 0)'
            },
            config2: {
                data: [
                   {
                     name: '周口',
                     value: 55
                   },
                   {
                     name: '南阳',
                     value: 120
                   },
                   {
                     name: '西峡',
                     value: 78
                   },
                   {
                     name: '驻马店',
                     value: 66
                   },
                   {
                     name: '新乡',
                     value: 80
                   },
                   {
                       name: '碧园村',
                       value: 256
                   },
                   {
                     name: '新乡',
                     value: 80
                   },
                   {
                     name: '新乡',
                     value: 80
                   },
                   {
                     name: '鸡公桥村',
                     value: 800
                   },
                   {
                     name: '羊岭村',
                     value: 560
                   }
                ],
                unit: '只'
            }
        }
    },
    mounted() {
        this.makechartone()
        this.makecharttwo()
        this.makechartthree()
        this.makechartfour()
        // this.makechartfive()
    },
    methods: {
        makechart() {
            const mychart = echarts.init(this.$refs.chart_one)
            // Generate data
            var category = [];
            var dottedBase = +new Date();
            var meatData = [];
            var eggData = [];
            
            for (var i = 0; i < 20; i++) {
                var date = new Date(dottedBase += 3600 * 24 * 1000);
                category.push([
                    date.getFullYear(),
                    date.getMonth() + 1,
                    date.getDate()
                ].join('-'));
                var b = Math.random() * 200;
                var d = Math.random() * 200;
                eggData.push(b)
                meatData.push(d + b);
            }
            // option
            const option = {
                backgroundColor: '#0f375f',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['肉鸽', '鸽蛋','鸽粪'],
                    textStyle: {
                        color: '#ccc'
                    }
                },
                xAxis: {
                    data: category,
                    axisLine: {
                        lineStyle: {
                            color: '#ccc'
                        }
                    }
                },
                yAxis: {
                    splitLine: {show: false},
                    axisLine: {
                        lineStyle: {
                            color: '#ccc'
                        }
                    }
                },
                series: [
                    {
                        name: '肉鸽',
                        type: 'line',
                        smooth: true,
                        showAllSymbol: true,
                        symbol: 'emptyCircle',
                        symbolSize: 15,
                        data: meatData
                    }, 
                    {
                        name: '鸽蛋',
                        type: 'bar',
                        barWidth: 10,
                        itemStyle: {
                            barBorderRadius: 5,
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#14c8d4'},
                                    {offset: 1, color: '#43eec6'}
                                ]
                            )
                        },
                        data: eggData
                    }, 
                    // {
                    //     name: '肉鸽',
                    //     type: 'bar',
                    //     barGap: '-100%',
                    //     barWidth: 10,
                    //     itemStyle: {
                    //         color: new echarts.graphic.LinearGradient(
                    //             0, 0, 0, 1,
                    //             [
                    //                 {offset: 0, color: 'rgba(20,200,212,0.5)'},
                    //                 {offset: 0.2, color: 'rgba(20,200,212,0.2)'},
                    //                 {offset: 1, color: 'rgba(20,200,212,0)'}
                    //             ]
                    //         )
                    //     },
                    //     z: -12,
                    //     data: eggData
                    // }, 
                    // {
                    //     name: 'dotted',
                    //     type: 'pictorialBar',
                    //     symbol: 'rect',
                    //     itemStyle: {
                    //         color: '#0f375f'
                    //     },
                    //     symbolRepeat: true,
                    //     symbolSize: [12, 4],
                    //     symbolMargin: 1,
                    //     z: -10,
                    //     data: meatData
                    // }
                ]
            }
            mychart.setOption(option)
        },
        makechartone() {
            const myChart1 = echarts.init(this.$refs.chart_one)
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#fffff'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                legend: {
                    data: [
                        {name: '肉鸽', textStyle:{color:"#FAFAFA"}},
                        {name: '鸽蛋', textStyle:{color:"#FAFAFA"}},
                        {name: '鸽粪', textStyle:{color:"#FAFAFA"}},
                    ]
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#FAFAFA'
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '数量(只、个)',
                        min: 0,
                        max: 5000,
                        interval: 500,
                        axisLabel: {
                            formatter: '{value} 个'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#FAFAFA'
                            }
                        }
                    },
                    {
                        type: 'value',
                        name: '斤(鸽粪)',
                        min: 0,
                        max: 1000,
                        interval: 100,
                        axisLabel: {
                            formatter: '{value} 斤'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#FAFAFA'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '肉鸽',
                        type: 'bar',
                        data: [500, 514, 1036, 1025, 613, 658, 560, 120, 600, 200, 1600, 3003]
                    },
                    {
                        name: '鸽蛋',
                        type: 'bar',
                        data: [206, 509, 920, 564, 725, 107, 756, 122, 507, 808, 600, 230]
                    },
                    {
                        name: '鸽粪',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [292, 162, 163, 1201, 1000, 221,221, 340,300, 450, 412, 402]
                    },
                ]
            }
            myChart1.setOption(option)
        },
        makecharttwo() {
            const myChart2 = echarts.init(this.$refs.chart_two)
            const option = {
                legend: {
                    // orient: 'vertical',
                    // data: [
                    //     {name: '养殖基地1',textStyle:{color:"#FAFAFA"}},
                    //     {name: '养殖基地2',textStyle:{color:"#FAFAFA"}},
                    //     {name: '养殖基地3',textStyle:{color:"#FAFAFA"}},
                    //     {name: '养殖基地4',textStyle:{color:"#FAFAFA"}}
                    // ]
                    textStyle: {
                        color:"#FAFAFA"
                    }
                },
                tooltip: {},
                dataset: {
                    source: [
                        ['product', '肉鸽', '鸽蛋', '鸽粪'],
                        ['养殖基地1', 43.3, 85.8, 93.7],
                        ['养殖基地2', 83.1, 73.4, 55.1],
                        ['养殖基地3', 86.4, 65.2, 82.5],
                        ['养殖基地4', 72.4, 53.9, 39.1]
                    ]
                },
                xAxis: {
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            color: '#FAFAFA'
                        }
                    }
                },
                yAxis: {
                    axisLine: {
                        lineStyle: {
                            color: '#FAFAFA'
                        }
                    }
                },
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [
                    {type: 'bar'},
                    {type: 'bar'},
                    {type: 'bar'}
                ]
            };
            myChart2.setOption(option)
        },
        makechartthree() {
            const myChart3 = echarts.init(this.$refs.chart_three)
            const option = {
                title: {
                    text: '养殖基地',
                    subtext: '自有比例',
                    left: 'center',
                    textStyle: {
                         fontWeight: '900',          //标题颜色
                         color: '#FAFAFA'
                    },
                },
                tooltip: {
                    trigger: 'item',
                    textStyle: {
                        color: '#FAFAFA'
                    }
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    textStyle: {
                        color: '#FAFAFA'
                    }
                },
                series: [
                    {
                        name: '养殖基地',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            {value: 21, name: '企业所有'},
                            {value: 73, name: '合作农户'},
                        ],
                        color: ['#51CEC6','#FFB703'],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
            myChart3.setOption(option)
        },
        suit() {
            this.ori1 = document.getElementById('chartone').clientWidth
            this.ori2 = document.getElementById('charttwo').clientWidth
            this.ori3 = document.getElementById('chartthree').clientWidth
            this.ori4 = document.getElementById('chartthree').clientHeight
            setTimeout(() => {
                let w1 = (document.getElementById('chartone').clientWidth - this.ori1)/2 + 'px'
                let w2 = (document.getElementById('charttwo').clientWidth - this.ori2)/2 + 'px'
                let w3 = (document.getElementById('chartthree').clientWidth - this.ori3)/2 + 'px'
                //let h3 = (document.getElementById('chartthree').clientHeight - this.ori4)/2 + 'px'
                console.log(w3);
                document.getElementById('chartone').style.setProperty('--chartone',w1)
                document.getElementById('charttwo').style.setProperty('--charttwo',w2)
                document.getElementById('chartthree').style.setProperty('--chartthree',w3)
                document.getElementById('chartfour').style.setProperty('--chartfour',w3)
                //document.getElementById('chartthree').style.setProperty('--chartthreeh',h3)
            },500)
        },
        res() {
            document.getElementById('chartone').style.setProperty('--chartone','0px')
            document.getElementById('charttwo').style.setProperty('--charttwo','0px')
            document.getElementById('chartthree').style.setProperty('--chartthreew','0px')
            document.getElementById('chartthree').style.setProperty('--chartthreeh','0px')
            document.getElementById('chartfour').style.setProperty('--chartfour','0px')
        },
        makechartfour() {
            const myChart4 = echarts.init(this.$refs.chart_four)
            const option = {
                title: {
                    text: '加工厂统计',
                    subtext: '',
                    left: 'center',
                    textStyle: {
                         fontWeight: '900',          //标题颜色
                         color: '#FAFAFA'
                    },
                },
                tooltip: {
                    trigger: 'item',
                    textStyle: {
                        color: '#FAFAFA'
                    }
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    textStyle: {
                        color: '#FAFAFA'
                    }
                },
                series: [
                    {
                        name: '加工厂',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            {value: 61, name: '企业所有'},
                            {value: 100, name: '合作工厂'},
                        ],
                        color: ['#409EFF','#67C23A'],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
            myChart4.setOption(option)
        },
        // makechartfive() {
        //     const mychart5 = echarts.init(this.$refs.chart_five)
        //     const option = {
        //           dataset: {
        //               source: [
        //                   ['score', 'amount', 'product'],
        //                   [89.3, 58212, 'Matcha Latte'],
        //                   [57.1, 78254, 'Milk Tea'],
        //                   [74.4, 41032, 'Cheese Cocoa'],
        //                   [50.1, 12755, 'Cheese Brownie'],
        //                   [89.7, 20145, 'Matcha Cocoa'],
        //                   [68.1, 79146, 'Tea'],
        //                   [19.6, 91852, 'Orange Juice'],
        //                   [10.6, 101852, 'Lemon Juice'],
        //                   [32.7, 20112, 'Walnut Brownie']
        //               ]
        //           },
        //           grid: {containLabel: true},
        //           xAxis: {
        //               name: 'amount',
        //               axisLine: {
        //                   lineStyle: {
        //                       color: '#FAFAFA'
        //                   }
        //               }
        //           },
        //           yAxis: {
        //               type: 'category',
        //               axisLine: {
        //                   lineStyle: {
        //                       color: '#FAFAFA'
        //                   }
        //               }
        //           },
        //           visualMap: {
        //               orient: 'horizontal',
        //               left: 'center',
        //               min: 10,
        //               max: 100,
        //               text: ['High Score', 'Low Score'],
        //               // Map the score column to color
        //               dimension: 0,
        //               inRange: {
        //                   color: ['#65B581', '#FFCE34', '#FD665F']
        //               }
        //           },
        //           series: [
        //               {
        //                   type: 'bar',
        //                   encode: {
        //                       // Map the "amount" column to X axis.
        //                       x: 'amount',
        //                       // Map the "product" column to Y axis
        //                       y: 'product'
        //                   }
        //               }
        //           ]
        //     }
        //     mychart5.setOption(option)
        // }
    }
}
</script>

<style lang="scss" scoped>
.box12 {
    box-sizing: border-box;
    padding-top: 20px;
}
#chartone {
    $chartone: var(--chartone,0px);
    box-sizing: border-box;
    padding: 0px $chartone;
}

#charttwo {
    $charttwo: var(--charttwo,0px);
    box-sizing: border-box;
    padding: 0px $charttwo;
}

#chartthree {
    $chartthree: var(--chartthree,0px);
    box-sizing: border-box;
    padding: 0px $chartthree;
}

#chartfour {
    $chartfour: var(--chartfour,0px);
    box-sizing: border-box;
    padding: 0px $chartfour;
}

#card {
    background-color: rgba(0, 0, 0, 0.288);
}

.smallcard {
    box-sizing: border-box;
    // margin-bottom: 10px;
    margin-top: 10px;
    background-color: rgba(0, 0, 0, 0.288);
}

.box_10 {
    padding: 0 5px;
}

.block {
    width:80%;
    margin:0 auto;
    box-sizing: border-box;
}
</style>